<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>今天吃啥</title>
  <script src="./vue.js">

  </script>
</head>

<body>
  <div class="cj_box" id="app">
    <div class="title">今天吃啥？</div>
    <div class="box">
      <div class="line_item" :class="index == 1 ? 'active' : 'white_item'">
        <div>常德家菜馆</div>
      </div>
      <div class="line_item" :class="index == 2 ? 'active' : 'white_item'">
        <div>食堂</div>
      </div>
      <div class="line_item" :class="index == 3 ? 'active' : 'white_item'">
        <div>黄焖鸡</div>
      </div>
      <div class="line_item" :class="index == 0 ? 'active' : 'white_item'">
        <div>泡菜/泡泡面</div>
      </div>
      <div class="line_item" @click="goLottery()" style="font-weight: 700">
        点我开始
      </div>
      <div class="line_item" :class="index == 4 ? 'active' : 'white_item'">
        <div>肉夹馍</div>
      </div>
      <div class="line_item" :class="index == 7 ? 'active' : 'white_item'">
        <div>螺狮粉</div>
      </div>
      <div class="line_item" :class="index == 6 ? 'active' : 'white_item'">
        <div>麻辣烫</div>
      </div>
      <div class="line_item" :class="index == 5 ? 'active' : 'white_item'">
        <div>粥</div>
      </div>
    </div>
  </div>

</body>
<style>
  .title {
    color: #fff;
    margin-top: 45%;
    font-size: 40px;
    font-weight: 700;
  }

  .cj_box {
    width: 100%;
    height: 700px;
    background: url('./bg.jpeg') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    justify-items: center;

  }

  .line_item {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: #6ca3b2;
  }

  .active {
    background-color: #fbc61c !important;
  }

  .white_item {
    background-color: #fff;
  }

  .box {
    position: absolute;
    bottom: 20%;
    width: 300px;
    height: 300px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    text-align: center;
    opacity: 0.8;
  }
</style>
<script>
  let vm = new Vue({
    el: '#app',
    data() {
      return {
        index: 1, // 当前转动到哪个位置，起点位置
        count: 8, // 总共有多少个位置
        timer: 0, // 每次转动定时器
        speed: 200, // 初始转动速度
        times: 0, // 转动次数
        cycle: 30, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
        prizes: 3, // 中奖位置
        prize: [0, 1, 2, 3, 4, 5, 6, 7], // 奖品位置
      }
    },
    methods: {
      goLottery() {
        //判断如果抽奖停止后才可以再次点击
        if (this.speed == 200) {
          this.prizes = this.prize[Math.floor((Math.random() * this.prize.length))]
          console.log(this.prizes)
          this.startRoll();
        }
      },
      // 开始转动
      startRoll() {
        this.times += 1 // 转动次数
        this.oneRoll() // 转动过程调用的每一次转动方法，这里是第一次调用初始化
        this.usePrize()
      },
      // 每一次转动
      oneRoll() {
        let index = this.index // 当前转动到哪个位置
        const count = 8 // 总共有多少个位置
        index += 1
        if (index > count - 1) {
          index = 0
        }
        this.index = index
      },
      usePrize() {
        // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
        if (this.times > this.cycle + 10 && this.prizes === this.index) {
          clearTimeout(this.timer) // 清除转动定时器，停止转动
          this.times = 0
          this.speed = 200 //速度初始化
        } else {
          if (this.times < this.cycle) {
            this.speed -= 5 // 加快转动速度 
          }
          this.timer = setTimeout(this.startRoll, this.speed)
        }
      }
    }
  })
</script>

</html>